<template>
  <el-container id="hero" direction="horizontal">
    <template>
      <el-descriptions class="margin-top" title="订单详情" :column="4" :size="size" border
                       style="margin: auto"
      >
        <template slot="extra">
          <el-button type="primary" size="small" @click="payment()" :disabled="order.status===1?true:false">去支付</el-button>
          <el-button type="primary" size="small" @click="refresh()">刷新</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            商品名称
          </template>
          {{order.detailName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            订单编号
          </template>
          {{order.traceNo}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            商品数量
          </template>
          {{order.detailNum}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            总价
          </template>
          <el-tag size="small">{{order.totalAmount}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            创建时间
          </template>
          {{parseTime(order.createDate, '{y}-{m}-{d} {h}:{i}:{s}')}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            支付编号
          </template>
          {{order.alipayTraceNo}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            支付时间
          </template>
          2024-02-25 16:57:14
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            订单状态
          </template>
          <el-tag type="danger" v-if="this.status===0">待支付</el-tag>
          <el-tag type="" v-if="this.status===1">已支付</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </el-container>
</template>

<script>


import {addOrder, getOrder, OrderPayment} from "@/api/shopping/order";


export default {
  created: function () {
    this.orderId = this.$route.params.orderId;
    getOrder(this.orderId).then(response => {
      this.order = response.data;
      this.traceNo = this.order.traceNo
      this.totalAmount = this.order.totalAmount
      this.subject = this.order.detailName
      this.status = this.order.status

    });
  },
  data() {
    return {
      orderId: null,
      order: null,
      size: '',
      traceNo: null,
      totalAmount: null,
      subject: null,
      status: null,
      datekey: Date.now()

    }
  },
  methods: {
    // handleChange(value) {
    //   console.log(value);
    // },
    // submitOrder() {
    //   addOrder(this.detailId).then(response => {
    //     let orderId = response.data;
    //     this.$router.push({name: 'orderDetail', params: {'orderId': orderId}});
    //   })
    // }
    payment() {
      window.open('http://localhost/dev-api/alipay/pay?'+"traceNo="+this.traceNo+"&subject="+this.subject+"&totalAmount="+this.totalAmount)
    },
    refresh(){
        // this.$router.push({name: 'orderDetail', params: {'orderId': this.order.orderId}});
      getOrder(this.orderId).then(response => {
        this.order = response.data;
        this.traceNo = this.order.traceNo
        this.totalAmount = this.order.totalAmount
        this.subject = this.order.detailName
        this.status = this.order.status
      });

    }
  },
  name: 'Order'
}
</script>

<style scoped lang="scss">
#id {
  flex: 1;
}

.goods-image {
  object-fit: cover;
  mask-image: -webkit-gradient(linear, left 10%, right 20%, from(black), to(transparent));
}

.goods-desc {
  //padding-left: 10px;
}

.element {
  padding: 20px 0;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.el-tab-pane {
  height: 200px;
}
</style>


